<template>
	<div>
		<router-link to="/photo">
			<div class="banner-top">
				<img src="@/assets/images/banner.jpg" alt="找不到">
			</div>
			<div class="swiper-top">
				<div>陕西历史博物馆(AAAA景区)</div>
			</div>
		</router-link>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				isShow:false,
				swiperOption:{       			
			        pagination: {
			            el: ".swiper-pagination",
			            type:"fraction"
			        },
					autoplay: {
					    delay: 3000,
					    stopOnLastSlide: false,
					    disableOnInteraction: true,
					}
				},
				swiperImg:[
					{
						id:"1",
						img:"http://img1.qunarzz.com/sight/p0/1411/b8/f5fd5955bdecc923ce6d40ce453160eb.water.jpg_r_800x800_cd81e9dd.jpg"
					},
					{
						id:"2",
						img:"http://img1.qunarzz.com/sight/p0/201403/07/2ba9f49f7359f3c489757488d193dcbc.jpg_r_800x800_f671f025.jpg"
					},
					{
						id:"3",
						img:"http://img1.qunarzz.com/sight/p0/201403/07/bda83eeb24c23f60f787a2fd049045b1.jpg_r_800x800_f51aedd1.jpg"
					},
					{
						id:"4",
						img:"http://img1.qunarzz.com/sight/p0/1411/54/adb8e1aba1c0e0886ff905f5c92f7816.water.jpg_r_800x800_2c131096.jpg"
					}
				]
			}
		},
		methods:{
				showImg(){
					this.isShow=false;
				},
				hideImg(){
					this.isShow=true
				}
		}
	}
</script>
<style scoped>
	.banner{
		position:relative;
		background:#fff;
		overflow:hidden;
	}
	.banner-top{
		overflow:hidden;
		width:100%;
		height:0;
		padding-bottom:55%;
	}
	.banner-top img{
		width:100%;
		display:block;
	}
	.swiper-top{
		position: relative;
	    right: .2rem;
	    bottom: .36rem;
	    left: .2rem;
	    min-height: .4rem;
	}
	.swiper-top>div{
		position: absolute;
		bottom:0.4rem;
	    z-index: 1;
	    line-height: .4rem;
	    color: #fff;
	    font-size: .36rem;
	    text-shadow: 0 1px 2px rgba(0,0,0,0.70);
	}
	
</style>